<template>
  <view class="search">
    <!-- 顶部搜索框 -->
   <view class="search-container">
      <uni-search-bar @input="onInput" clearButton="auto" cancelButton="none" radius="50" v-model="keyword">
      </uni-search-bar>
   </view>
   <!-- 搜索历史 -->
   <view class="search-history" v-show="this.keyword===''">
      <view class="top">
        <text>搜索历史</text>
        <uni-icons type="trash" size="25" @click="clearSearchHistory"></uni-icons>
      </view>
      <view class="bottom">
        <uni-tag :text="item" v-for="(item,index) in searchHistory" :key="index" @click="selectKeyword(item)"></uni-tag>
      </view>
   </view>
   <!-- 搜索建议 -->
   <view class="suggest-list" v-show="searchResult.length">
     <view class="suggest-item" v-for="(item,index) in searchResult" :key="index" @click="goDetail(item.goods_id)">
        <view class="goods-name">
           {{item.goods_name}}
        </view>
       <uni-icons type="right" size="20"></uni-icons>
     </view>
   </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 延时器的id
        timer:null,
        // 搜索关键词
        keyword:'',
        searchResult:[],
        // 搜索历史
        searchHistory:[]
      };
    },
    onLoad() {
      // 初始化搜索历史数组
      this.searchHistory = JSON.parse(uni.getStorageSync('historyList') || '[]')
    },
    methods:{
      onInput(value){
        // 输入框防抖处理
        clearTimeout(this.timer)
          this.timer = setTimeout(async()=>{
          this.keyword = value
          if(this.keyword.length){
          this.storeKeyword()
          const {data:res} = await uni.$http.get(`/api/public/v1/goods/qsearch?query=${this.keyword}`)
          if(res.meta.status !== 200) return uni.$showMsg()
          this.searchResult = res.message
          }else{
            this.searchResult = []
          }
        },500)
      },
      goDetail(goodsId){
        uni.navigateTo({
           url:`/subpkg/goods_detail/goods_detail?goods_id=${goodsId}`
        })
      },
      storeKeyword(){
        if(this.keyword=='') return
        const findResult = this.searchHistory.findIndex(item => item===this.keyword)
        if(findResult ==-1) this.searchHistory.unshift(this.keyword)
        else{
          // 输入的关键词与搜索历史中的关键词重复
          // 1.删除该关键词在搜索历史中对应的元u素
          this.searchHistory.splice(findResult,1)
          // 2.在搜索历史数组首部添加该元素
          this.searchHistory.unshift(this.keyword)
        }
        // 本地持久化存储搜索历史
        uni.setStorageSync('historyList',JSON.stringify(this.searchHistory))
      },
      selectKeyword(item){
        this.keyword = item
        // 在历史列表删除该项
       let arr =  this.searchHistory.filter(i => i!==item)
        this.searchHistory = arr
        // 本地持久化存储搜索历史
        uni.setStorageSync('historyList',JSON.stringify(this.searchHistory))
        uni.navigateTo({
          url:'/subpkg/goods_list/goods_list?query=' + item
        })
      },
      // 清空搜索历史数组
      clearSearchHistory(){
        this.searchHistory = []
        uni.removeStorageSync('historyList')
      }
    }
  }
</script>

<style lang="scss">
.search{
  position: relative;
  .search-container{
    height: 100rpx;
    width: 100%;
    background-color: #c00000;
    position: sticky;
    top: 0;
    z-index: 999;
  }
  .search-history{
    background-color: #fff;
    height: 1100rpx;
   .top{
     height: 80rpx;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0 10rpx;
     background-color: #fff;
     border-bottom: #efefef 2rpx solid;
     margin-bottom: 15rpx;
   }
   .bottom{
     width: 100%;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     padding: 0 20rpx;
     .uni-tag{
       margin-right: 10rpx;
       background-color: #d7fff4;
       color: #000;
     }
   }
  }
  .suggest-list{
    width: 100%;
    background-color: #ffffff;
    position: absolute;
    top: 100rpx;
    .suggest-item{
      height: 90rpx;
      line-height: 90rpx;
      display: flex;
      justify-content: space-between;
      text-align: center;
      border-bottom: #efefef 2rpx solid;
      .goods-name{
        white-space: nowrap;
        overflow: hidden; /* 隐藏超出容器的内容 */
        text-overflow: ellipsis; /* 超出部分用省略号表示 */
        text-align: center;
        font-size: 24rpx;
        padding: 0 24rpx;
        margin-right: 6rpx;
      }
    }
  }
}
</style>
